<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8"/>
</head>
<title>演示demo</title>
<style>
    * {
        box-sizing: border-box;
        /* 在X5新内核Blink中，在排版页面的时候，会主动对字体进行放大，会检测页面中的主字体，当某一块字体在我们的判定规则中，认为字号较小，并且是页面中的主要字体，就会采取主动放大的操作。然而这不是我们想要的，可以采取给最大高度解决 */
        max-height: 100000px;
    }

    *:before, *:after {
        box-sizing: border-box;
        max-height: 100000px;
    }

    *, *:before, *:after {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, textarea, td {
        border: 0 none;
        font-size: inherit;
        color: inherit;
        margin: 0;
        padding: 0;
        vertical-align: baseline;
    }

    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;
    }

    em, strong {
        font-style: normal;
    }

    ul, ol, li {
        list-style: none;
    }

    body {
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
        line-height: 1.5;
        color: #333;
        /* #222 */
        background-color: #f2f2f2;
        font-size: 0.24rem;
    }

    a {
        text-decoration: none;
    }

    .box {
        position: relative;
        max-width: 10rem;
        margin: 0 auto;
    }

    /* ANIMATION */
    @-webkit-keyframes rotate {
        from {
            -webkit-transform: rotate(0deg)
        }
        to {
            -webkit-transform: rotate(360deg)
        }
    }

    @-moz-keyframes rotate {
        from {
            -moz-transform: rotate(0deg)
        }
        to {
            -moz-transform: rotate(360deg)
        }
    }

    @-o-keyframes rotate {
        from {
            -o-transform: rotate(0deg)
        }
        to {
            -o-transform: rotate(360deg)
        }
    }

    @keyframes rotate {
        from {
            transform: rotate(0deg)
        }
        to {
            transform: rotate(360deg)
        }
    }

    @-webkit-keyframes fade {
        from {
            opacity: 1
        }
        50% {
            opacity: 0
        }
        to {
            opacity: 1
        }
    }

    @-moz-keyframes fade {
        from {
            opacity: 1
        }
        50% {
            opacity: 0
        }
        to {
            opacity: 1
        }
    }

    @-o-keyframes fade {
        from {
            opacity: 1
        }
        50% {
            opacity: 0
        }
        to {
            opacity: 1
        }
    }

    @keyframes fade {
        from {
            opacity: 1
        }
        50% {
            opacity: 0
        }
        to {
            opacity: 1
        }
    }

    /* CONTAINER */
    .container {
        width: 150px;
        height: 150px;
        /* PRESENTATIONAL PURPOSES */
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        /**/
        cursor: pointer;
        -webkit-user-select: none;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -webkit-box-shadow: 0 0 0 6px #222,
        0 0 6px 10px #444;
        -moz-box-shadow: 0 0 0 6px #222,
        0 0 6px 10px #444;
        box-shadow: 0 0 0 6px #222,
        0 0 6px 10px #444
    }

    /* TEXT */
    #content {
        background: #222;
        background: -webkit-linear-gradient(#222, #111);
        background: -moz-linear-gradient(#222, #111);
        background: -o-linear-gradient(#222, #111);
        background: linear-gradient(#222, #111);
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        text-align: center;
        font: normal normal normal 12px/140px 'Electrolize', Helvetica, Arial, sans-serif;
        color: #fff
    }

    #content span {
        vertical-align: middle;
        -webkit-animation: fade 1s linear infinite;
        -moz-animation: fade 1s linear infinite;
        -o-animation: fade 1s linear infinite;
        animation: fade 1s linear infinite
    }

    /* SPINNING GRADIENT */
    .ring {
        margin: 0 auto;
        border-radius: 110px;
        padding: 10px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        -webkit-animation: rotate 1s linear infinite;
        -moz-animation: rotate 1s linear infinite;
        -o-animation: rotate 1s linear infinite;
        animation: rotate 1s linear infinite
    }

    /* COLORS */
    .green {
        background: -webkit-linear-gradient(#bfff00, transparent, #bfff00);
        background: -moz-linear-gradient(#bfff00, transparent, #bfff00);
        background: -o-linear-gradient(#bfff00, transparent, #bfff00);
        background: linear-gradient(#bfff00, transparent, #bfff00)
    }

    .blue {
        background: -webkit-linear-gradient(#3cf, transparent, #3cf);
        background: -moz-linear-gradient(#3cf, transparent, #3cf);
        background: -o-linear-gradient(#3cf, transparent, #3cf);
        background: linear-gradient(#3cf, transparent, #3cf)
    }

    .red {
        background: -webkit-linear-gradient(#cd5c5c, transparent, #cd5c5c);
        background: -moz-linear-gradient(#cd5c5c, transparent, #cd5c5c);
        background: -o-linear-gradient(#cd5c5c, transparent, #cd5c5c);
        background: linear-gradient(#cd5c5c, transparent, #cd5c5c)
    }

    .purple {
        background: -webkit-linear-gradient(#e166e1, transparent, #e166e1);
        background: -moz-linear-gradient(#e166e1, transparent, #e166e1);
        background: -o-linear-gradient(#e166e1, transparent, #e166e1);
        background: linear-gradient(#e166e1, transparent, #e166e1)
    }

    /**/
    .weui_btn_primary {
        background-color: #04BE02;
    }

    .weui_btn {
        position: relative;
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding-left: 14px;
        padding-right: 14px;
        box-sizing: border-box;
        font-size: 18px;
        text-align: center;
        text-decoration: none;
        color: #FFFFFF;
        line-height: 2.33333333;
        border-radius: 5px;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        overflow: hidden;
    }
</style>
<body id="body">
<script type="text/javascript">

    function task() {
        let data = "{\"data\":{\"pageSize\":10,\"currPage\":1}}";
        document.getElementById("container").style.display = "block";
        document.getElementById("body").style.backgroundColor = "#222";
        /* #222 */
        //  background-color: #f2f2f2;
        fetch("./execute", {
            method: "POST",
            body: data,
            headers: {
                //	"Content-Type" : "application/json"
            },
            credentials: "same-origin"
        }).then(function (response) {
            // console.log(response);
            //  response.status //=> number 100–599
            // response.statusText //=> String
            //  response.headers //=> Headers
            // response.url //=> String
            //  console.log(response.text());
            document.getElementById("container").style.display = "none";
            document.getElementById("body").style.backgroundColor = "#f2f2f2";
            //
            return response.json();

        }).then(function (json) {

            console.log(json);
            let htmlStr = "本次一共处理了" + json.total + "条数据。&#10;";
            let servers = json.server;
            for (var key in servers) {

                var j = servers[key];
               // htmlStr += "["+ j.name + "] [" + j.address + "] 处理了" + j.data + "条数据。&#10;"
               // console.log(j.name);
                htmlStr += "节点>>>["+ j.name + "] 处理了" + j.data + "条数据。&#10;"

            }
            // innerText
            document.getElementById("textarea").innerHTML = htmlStr;


        }, function (error) {
            console.log(error);
            console.log(error.message);
            error.message //=> String
            document.getElementById("container").style.display = "none";
            document.getElementById("body").style.backgroundColor = "#f2f2f2";
            //
        })
    }


</script>
<!-- 阿里高清方案 -->
<script>!function (e) {
    function t(a) {
        if (i[a]) return i[a].exports;
        var n = i[a] = {exports: {}, id: a, loaded: !1};
        return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports
    }

    var i = {};
    return t.m = e, t.c = i, t.p = "", t(0)
}([function (e, t) {
    "use strict";
    Object.defineProperty(t, "__esModule", {value: !0});
    var i = window;
    t["default"] = i.flex = function (e, t) {
        var a = e || 100, n = t || 1, r = i.document, o = navigator.userAgent,
            d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i), l = o.match(/U3\/((\d+|\.){5,})/i),
            c = l && parseInt(l[1].split(".").join(""), 10) >= 80,
            p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi), s = i.devicePixelRatio || 1;
        p || d && d[1] > 534 || c || (s = 1);
        var u = 1 / s, m = r.querySelector('meta[name="viewport"]');
        m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u + ",minimum-scale=" + u), r.documentElement.style.fontSize = a / 2 * s * n + "px"
    }, e.exports = t["default"]
}]);
flex(100, 1);</script>


<div class="box">
    <ul style="font-size:0.3rem; padding: 1rem">
        <li>1.点击 '执行任务'之后开始模拟业务流程。</li>
        <li style="margin-top: 5px;margin-bottom: 5px;"><textarea id="textarea" type="text" style="font-size: 18px; padding: 10px 10px 10px 5px;
    display: block;
    width: 400px;height:220px;border: 1px solid #757575;border-radius: 5px;" placeholder=""
                                                                  readonly="readonly"> </textarea></li>
        <li></li>
        <li style="margin-top: 20px;">
            <div class="weui_btn_area">
                <a class="weui_btn weui_btn_primary" onclick="task()" href="javascript:" id="button">执行任务</a>
            </div>
        </li>

    </ul>
</div>
<link href='https://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css'>
<div class="container" style="display: none;" id="container">
    <div class='ring blue'></div>
    <div id="content">
        <span>正在处理，请稍后</span>
    </div>
</div>
<!--COLORS
--RED
--BLUE
--GREEN
--PURPLE
-->


</body>

</html>